<template>
<!-- 我的订单 -->
  <div id="Orderall" :style="{minHeight: currHeight + 'px'}">
    <!-- 导航栏 -->
    <van-nav-bar title="我的订单" left-text="返回" left-arrow 
       @click-left="onClickLeft"
             @click-right="onClickRight" 
    >
      <van-icon name="ellipsis" slot="right" />
    </van-nav-bar>
    <!-- 内容 -->
    <div class="content">
        <van-tabs v-model="active" title-active-color="#000000" title-inactive-color="#bbbbbb" color="#234497">
            <van-tab title="全部">
                <div class="order_number">
                    <div class="order_number_title">
                        <p class="order_title_left">订单号：1000800245123569<p>
                        <p class="order_title_right">待付款</p>
                    </div>
                    <hr class="wire">
                    <!-- 商品介绍 -->
                    <div class="shop">
                        <div>
                            <img src="../assets/images/我的订单/pic_1.png" class="shop_pho">
                        </div>
                        <div>
                            <p class="shop_name">春秋商务休闲加肥加大胖子衬衣肥佬宽松中年正装长</p>
                            <p class="shop_price">￥<span class="shop_num">2000.00</span></p>
                        </div>
                        <div class="shop_ride">
                            ×<span class="shop_count">1</span>
                        </div>
                    </div>
                    <!-- 按钮 -->
                    <div class="wait_payment">
                        <button class="wait_payment_left">取消订单</button>
                        <router-link to="/OrderDetail"><button class="wait_payment_right">去支付</button></router-link>                   
                        <!-- <router-link to='/OrderDetail'> -->
                        <img src="../assets/images/我的订单/icon.png" class="button_pic">                            
                        <!-- </router-link> -->
                    </div>
                </div>

                <div class="order_number" 
                v-for="item in items"
                :key="item.id">
                    <div class="order_number_title">
                        <p class="order_title_left">{{item.number}}<p>
                        <p class="order_title_right">{{item.receipt}}</p>
                    </div>
                    <hr class="wire">
                    <!-- 商品介绍 -->
                    <div class="shop">
                        <div>
                            <img src="../assets/images/我的订单/pic_1.png" class="shop_pho">
                        </div>
                        <div>
                            <p class="shop_name">{{item.name}}</p>
                            <p class="shop_price">￥<span class="shop_num">{{item.price}}</span></p>
                        </div>
                        <div class="shop_ride">
                            ×<span class="shop_count">{{item.count}}</span>
                        </div>
                    </div>
                    <!-- 按钮 -->
                    <div class="affirm_harvest"> 
                       <router-link to="/"><button>{{item.payment}}</button></router-link>                        
                       <img src="../assets/images/我的订单/icon.png" >                            
                    </div>
                </div>
                 <div class="order_number" 
                v-for="item in lists"
                :key="item.id">
                    <div class="order_number_title">
                        <p class="order_title_left">{{item.number}}<p>
                        <p class="order_title_right">{{item.receipt}}</p>
                    </div>
                    <hr class="wire">
                    <!-- 商品介绍 -->
                    <div class="shop">
                        <div>
                            <img src="../assets/images/我的订单/pic_1.png" class="shop_pho">
                        </div>
                        <div>
                            <p class="shop_name">{{item.name}}</p>
                            <p class="shop_price">￥<span class="shop_num">{{item.price}}</span></p>
                        </div>
                        <div class="shop_ride">
                            ×<span class="shop_count">{{item.count}}</span>
                        </div>
                    </div>
                    <!-- 按钮 -->
                    <div class="affirm_harvest"> 
                        <router-link to="/EVALUTE"><button>{{item.payment}}</button></router-link>                    
                       <img src="../assets/images/我的订单/icon.png" >                            
                    </div>
                </div>
            </van-tab>


            <van-tab title="待付款">
<!--                     待付款                        -->
                <div class="order_number">
                    <div class="order_number_title">
                        <p class="order_title_left">订单号：1000800245123569<p>
                        <p class="order_title_right">待付款</p>
                    </div>
                    <hr class="wire">
                    <!-- 商品介绍 -->
                    <div class="shop">
                        <div>
                            <img src="../assets/images/我的订单/pic_1.png" class="shop_pho">
                        </div>
                        <div>
                            <p class="shop_name">春秋商务休闲加肥加大胖子衬衣肥佬宽松中年正装长</p>
                            <p class="shop_price">￥<span class="shop_num">2000.00</span></p>
                        </div>
                        <div class="shop_ride">
                            ×<span class="shop_count">1</span>
                        </div>
                    </div>
                    <!-- 按钮 -->
                    <div class="wait_payment">
                        
                        <button class="wait_payment_left" @click="cancel()">取消订单</button>
                        <router-link to="/OrderDetail"><button class="wait_payment_right" @click="payment()">去支付</button></router-link>
                        <!-- <router-link to='/OrderDetail'> -->
                        <img src="../assets/images/我的订单/icon.png" class="button_pic">                           
                        <!-- </router-link> -->
                    </div>
                </div>
            </van-tab>
<!--                         待收货                    -->
            <van-tab title="待收货">
                <div class="order_number" 
                v-for="item in items"
                :key="item.id">
                    <div class="order_number_title">
                        <p class="order_title_left">{{item.number}}<p>
                        <p class="order_title_right">{{item.receipt}}</p>
                    </div>
                    <hr class="wire">
                    <!-- 商品介绍 -->
                    <div class="shop">
                        <div>
                            <img src="../assets/images/我的订单/pic_1.png" class="shop_pho">
                        </div>
                        <div>
                            <p class="shop_name">{{item.name}}</p>
                            <p class="shop_price">￥<span class="shop_num">{{item.price}}</span></p>
                        </div>
                        <div class="shop_ride">
                            ×<span class="shop_count">{{item.count}}</span>
                        </div>
                    </div>
                    <!-- 按钮 -->
                    <div class="affirm_harvest"> 
                       <router-link to="/EVALUTE"><button @click="receipt()">{{item.payment}}</button></router-link>                       
                       <img src="../assets/images/我的订单/icon.png" >                            
                    </div>
                </div>
            </van-tab>
<!--                         待评价                    -->
            <van-tab title="待评价">
                <div class="order_number" 
                v-for="item in lists"
                :key="item.id">
                    <div class="order_number_title">
                        <p class="order_title_left">{{item.number}}<p>
                        <p class="order_title_right">{{item.receipt}}</p>
                    </div>
                    <hr class="wire">
                    <!-- 商品介绍 -->
                    <div class="shop">
                        <div>
                            <img src="../assets/images/我的订单/pic_1.png" class="shop_pho">
                        </div>
                        <div>
                            <p class="shop_name">{{item.name}}</p>
                            <p class="shop_price">￥<span class="shop_num">{{item.price}}</span></p>
                        </div>
                        <div class="shop_ride">
                            ×<span class="shop_count">{{item.count}}</span>
                        </div>
                    </div>
                    <!-- 按钮 -->
                    <div class="affirm_harvest"> 
                        <router-link to="/EVALUTE"><button @click="evaluate()">{{item.payment}}</button></router-link>
                       <img src="../assets/images/我的订单/icon.png" >                            
                    </div>
                </div>
            </van-tab>
            </van-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Orderall',
  data () {
    return {
        active: 2,
        items:[{
            id:1,
            number:'订单号：1000800245123569',
            receipt:"待收货",
            name:"春秋商务休闲加肥加大胖子衬衣肥佬宽松中年正装长",
            img:"../assets/images/我的订单/pic_1.png",
            count:1,
            price:"2000.00",
            payment:"确认收货"
        },
        {
            id:2,
            number:'订单号：1000800245123569',
            receipt:"待收货",
            name:"春秋商务休闲加肥加大胖子衬衣肥佬宽松中年正装长",
            img:"../assets/images/我的订单/pic_1.png",
            count:1,
            price:"2000.00",
            payment:"确认收货"
        }
        ],
        lists:[{
            id:3,
            number:'订单号：1000800245123569',
            receipt:"待评价",
            name:"春秋商务休闲加肥加大胖子衬衣肥佬宽松中年正装长",
            img:"../assets/images/我的订单/pic_1.png",
            count:1,
            price:"2000.00",
            payment:"评价&晒单"
        },
        {
            id:4,
            number:'订单号：1000800245123569',
            receipt:"待评价",
            name:"春秋商务休闲加肥加大胖子衬衣肥佬宽松中年正装长",
            img:"../assets/images/我的订单/pic_1.png",
            count:1,
            price:"2000.00",
            payment:"评价&晒单"
        }
        ],
        currHeight:''
    }
  },
  methods: {
    onClickLeft() {
      
      this.$router.go(-1)
    },
    onClickRight() {
      
    },
    //取消订单
    cancel(){
    },
    //去付款
    payment(){
    },
    //评价
    evaluate(){
    },
    //收货
    receipt(){
    }
  },
  mounted(){
    this.currHeight = document.documentElement.clientHeight
    window.onresize = () => {
      this.currHeight = document.documentElement.clientHeight     
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
.content{
    width:100%;
    height:1330px;
    background-color: #f3f4f6;
    box-sizing: border-box;
    padding-top:90px; 
//   待评价商品
.order_number{
    width:100%;
    height:352px;
    background-color: #ffffff;
    margin-top: 30px;
    .order_number_title{
        display: flex;
        justify-content:space-between;
        .order_title_left{
            font-size:24px;
            margin-left: 20px;
            margin-top: 20px;
        }
        .order_title_right{
            font-size:24px;
            color:#ff4242;
            margin-right: 20px;
            margin-top: 20px;
        }
    }
    .wire{
        border:1PX solid #e1e1e1;
        margin-top:10px;
    }
    .shop{
        display: flex;
        margin-top:20px;
        justify-content:space-between;
    }
    .shop_pho{
        margin-left: 50px;
        width:50%;
    }
    .shop_price{
        font-size:24px;
        margin-right: 50px;
    }
    .shop_name{
        font-size:24px;
        margin-right: 50px;
    }
    .shop_num{
        font-size:36px;
    }
    .shop_ride{
        font-size: 24px;
    }
    .shop_count{
        font-size: 30px;
        margin-right: 10px;
    }
    .cancel{
        font-size: 30px;
        width:50%;
        float: left;
        height:100px;
        margin-top: 31px;
        text-align: center;
        line-height: 100px;
        color: #999999;
    }
    .affirm_harvest{
        width: 100%;
        height: 110px;
        line-height: 110px !important;
        position: relative;
        top: 20px;
        button{
            width: 100%;
            height: 100%;
            border: none;
            box-sizing: border-box;
            font-size: 28px;
            color:#234497;
        }
        img{
            position: absolute;
            height: 36%;
            top: 40%;
            right: 10%;
            // z-index: 99999999;  
        }
    }
}
//  待收货商品
.order_number{
    width:100%;
    height:352px;
    background-color: #ffffff;
    margin-top: 30px;
    .order_number_title{
        display: flex;
        justify-content:space-between;
        .order_title_left{
            font-size:24px;
            margin-left: 20px;
            margin-top: 20px;
        }
        .order_title_right{
            font-size:24px;
            color:#ff4242;
            margin-right: 20px;
            margin-top: 20px;
        }
    }
    .wire{
        border:1PX solid #e1e1e1;
        margin-top:10px;
    }
    .shop{
        display: flex;
        margin-top:20px;
        justify-content:space-between;
    }
    .shop_pho{
        margin-left: 50px;
        width:50%;
    }
    .shop_price{
        font-size:24px;
        margin-right: 50px;
    }
    .shop_name{
        font-size:24px;
        margin-right: 50px;
    }
    .shop_num{
        font-size:36px;
    }
    .shop_ride{
        font-size: 24px;
    }
    .shop_count{
        font-size: 30px;
         margin-right: 10px;
    }
    .affirm_harvest{
        width: 100%;
        height: 110px;
        line-height: 110px !important;
        position: relative;
        top: 20px;
        button{
            width: 100%;
            height: 100%;
            border: none;
            box-sizing: border-box;
            font-size: 28px;
        }
        img{
            position: absolute;
            height: 36%;
            top: 40%;
            right: 10%; 
        }
    }
}
}
//  待付款商品
.order_number{
        width:100%;
        height:352px;
        background-color: #ffffff;
        margin-top: 30px;
        .order_number_title{
            display: flex;
            justify-content:space-between;
            .order_title_left{
                font-size:24px;
                margin-left: 20px;
                margin-top: 20px;
            }
            .order_title_right{
                font-size:24px;
                color:#ff4242;
                margin-right: 20px;
                margin-top: 20px;
            }
        }
        .wire{
            border:1PX solid #e1e1e1;
            margin-top:10px;
        }
        .shop{
            display: flex;
            margin-top:20px;
            justify-content:space-between;
        }
        .shop_pho{
            margin-left: 50px;
            width:50%;
        }
        .shop_price{
            font-size:24px;
            margin-right: 50px;
        }
        .shop_name{
            font-size:24px;
            margin-right: 50px;
        }
        .shop_num{
            font-size:36px;
        }
        .shop_ride{
            font-size: 24px;
        }
        .shop_count{
            font-size: 30px;
             margin-right: 10px;
        }
        .wait_payment{
            width: 100%;
            height: 110px;
            line-height: 110px !important;
            position: relative;
            top: 12px;
            .wait_payment_left{
                width: 50%;
                height: 100%;
                border: none;
                box-sizing: border-box;
                font-size: 28px;
                float: left;
                background-color: #ffffff;
            }
            .wait_payment_right{
                width: 50%;
                height: 100%;
                border: none;
                box-sizing: border-box;
                font-size: 28px;
                float: left;
                color:#234497;
            }
            img{
                position: absolute;
                height: 36%;
                top: 35%;
                right: 10%; 
            }
        }
}


</style>
